<template>
  <nut-input v-model="model" :placeholder="props.placeholder" @click="clickInput" readonly
    :input-align="props.inputAlign" placeholder-style="color:#ccc;" />
  <nut-number-keyboard type="rightColumn" v-model:visible="visiblity" v-model="model" maxlength="18"
    :custom-key="customKey" @input="input" @close="close" @confirm="close" @delete="deleteInput" />
</template>

<script setup lang="ts">
const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入证件号码'
  },
  inputAlign: {
    type: String,
    default: 'left',
  },
})
const model = defineModel({ type: String })
const isVisiblity = defineModel('isVisiblity', { type: Boolean })
const visiblity = ref<boolean>(false)
const customKey = reactive(['X'])
function clickInput () {
  visiblity.value = true
  isVisiblity.value = true
}
function close () {
  visiblity.value = false
  isVisiblity.value = false
}
function deleteInput () {
  if (model.value && model.value.length > 0) {
    model.value = model.value.slice(0, -1)
  }
}
function input (value: string | number) {
  let num = model.value + value
  if (num.length > 18) {
    model.value = num.slice(0, 18);
  } else {
    model.value = num;
  }
  // model.value = model.value + value
}
</script>